<template>
    <div class="image-timeline-wrapper tech-timeline-wrapper">
        <div class="radio tech-radio-group">
            排序：
            <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
            </el-radio-group>
        </div>
        <el-timeline
            class="image-timeline-list tech-timeline-list"
            :reverse="reverse"
            v-if="imageTimelineData.length"
        >
            <el-timeline-item
                class="image-timeline-item tech-timeline-item"
                v-for="(item, index) in imageTimelineData"
                :key="index"
                :timestamp="item.uploadDate"
                color="#00f2ff" placement="top"
            >
                <ul class="image-list tech-image-list">
                    <li
                        class="image-item tech-image-item"
                        v-for="(image, imageIndex) in item.imageList"
                        :key="`${index}-${imageIndex}`"
                        :style="`width: ${gridSize + 40}px; `"
                        @click="$file.handleImgPreview(imageIndex, {}, item.imageList)"
                        @contextmenu.prevent="handleContextMenu(item, imageIndex, $event)"
                    >
                        <img
                            class="image"
                            :src="$file.getMinImgStream(image)"
                            :alt="$file.getFileNameComplete(image)"
                            :style="`width: ${gridSize}px; height: ${gridSize}px;`"
                        />
                        <div
                            class="image-name tech-image-name"
                            v-html="$file.getFileNameComplete(image, true)"
                        ></div>
                    </li>
                </ul>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
export default {
    name: 'FileTimeLine',
    props: {
        // 文件列表
        fileList: {
            required: true,
            type: Array
        }
    },
    data() {
        return {
            reverse: true
        }
    },
    computed: {
        //  按年-月-日分组排序
        imageTimelineData() {
            let res = []
            //  去重，获取返回的所有日期年-月-日
            let uploadTimeSet = new Set(
                this.fileList.map((item) => item.uploadTime.split(' ')[0])
            )
            let uploadDate = [...uploadTimeSet]
            //  分组
            uploadDate.forEach((element) => {
                res.push({
                    uploadDate: element,
                    imageList: this.fileList.filter(
                        (item) => item.uploadTime.split(' ')[0] === element
                    ) //  过滤
                })
            })
            return res
        },
        // 图标大小
        gridSize() {
            return this.$store.getters.gridSize
        },
        // 屏幕宽度
        screenWidth() {
            return this.$store.state.common.screenWidth
        }
    },
    methods: {
        /**
         * 文件鼠标右键事件
         * @param {object} item 文件信息
         * @param {number} index 文件索引
         * @param {object} event 鼠标事件信息
         */
        handleContextMenu(item, index, event) {
            // 阻止右键事件冒泡
            event.cancelBubble = true
            // xs 以上的屏幕
            if (this.screenWidth > 768) {
                this.selectedFile = item
                if (!this.isBatchOperation) {
                    event.preventDefault()
                    this.$openBox
                        .contextMenu({
                            selectedFile: item,
                            domEvent: event
                        })
                        .then((res) => {
                            this.selectedFile = {}
                            if (res === 'confirm') {
                                this.$emit('getTableDataByType') //  刷新文件列表
                                this.$store.dispatch('showStorage') //  刷新存储容量
                            }
                        })
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
/* ================= 赛博朋克主题变量 ================= */
@bg-dark: #0f1219;
@bg-panel: rgba(26, 31, 44, 0.7);
@primary-color: #00f2ff; /* Cyber Cyan - 霓虹青色 */
@accent-color: #7d2ae8;  /* Neon Purple */
@text-main: #e2e8f0; // 浅色主文本
@text-sub: #94a3b8;  // 辅助文本
@border-color: rgba(255, 255, 255, 0.08); // 用于主要边框
@hover-bg: rgba(0, 242, 255, 0.1); // 悬停背景
@danger-color: #ff4949; // 危险/高亮关键词颜色

/* Mixin for scrollbar (手动实现原 Stylus Mixin) */
.setScrollbar(@width, @track-color, @thumb-color) {
  &::-webkit-scrollbar {
    width: @width;
    height: @width;
  }
  &::-webkit-scrollbar-track {
    background: @track-color;
  }
  &::-webkit-scrollbar-thumb {
    background: @thumb-color;
    border-radius: @width / 2;
  }
}

.image-timeline-wrapper.tech-timeline-wrapper {
    margin-top: 20px;
    height: calc(100vh - 215px);
    overflow-y: auto;
    background-color: @bg-dark;
    color: @text-main;
    .setScrollbar(6px, transparent, rgba(148, 163, 184, 0.4)); // 赛博朋克滚动条
    padding: 0 20px; // 左右增加一些内边距
}

.radio.tech-radio-group {
    color: @text-sub;
    font-size: 14px;
    margin-bottom: 20px;

    // 调整 El-Radio 样式
    ::v-deep .el-radio {
        color: @text-sub;
    }
    ::v-deep .el-radio__input.is-checked .el-radio__inner {
        background: @primary-color;
        border-color: @primary-color;
        box-shadow: 0 0 8px @primary-color;
    }
    ::v-deep .el-radio__input.is-checked + .el-radio__label {
        color: @primary-color;
    }
    ::v-deep .el-radio__inner {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid @text-sub;
    }
}

.image-timeline-list.tech-timeline-list {
    margin-top: 10px;
    
    // 覆盖 Element UI Timeline 样式
    ::v-deep .el-timeline-item__tail {
        border-left: 2px solid @border-color; // 时间线连接线颜色
    }
    ::v-deep .el-timeline-item__node {
        background-color: @primary-color !important; // 节点颜色
        box-shadow: 0 0 10px @primary-color; // 节点光效
    }
    
    .image-timeline-item.tech-timeline-item {
        
        // 覆盖时间戳样式
        ::v-deep .el-timeline-item__timestamp {
            color: @primary-color; // 时间戳颜色
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10px;
        }

        .image-list.tech-image-list {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            padding: 0; // 重置 ul padding

            .image-item.tech-image-item {
                margin: 0 16px 16px 0;
                padding: 8px;
                text-align: center;
                cursor: pointer;
                background-color: @bg-panel; // 文件项背景色
                border: 1px solid @border-color; // 边框
                border-radius: 6px; // 圆角
                transition: all 0.3s ease;
                
                img.image {
                    border-radius: 4px;
                }

                &:hover {
                    background: @hover-bg;
                    border-color: @primary-color;
                    box-shadow: 0 0 15px @primary-color; // 悬停霓虹光效
                    transform: translateY(-2px);
                    
                    .image-name.tech-image-name {
                        color: @primary-color;
                        text-shadow: 0 0 8px rgba(0, 242, 255, 0.7);
                        font-weight: bold;
                    }
                }

                .image-name.tech-image-name {
                    margin-top: 8px;
                    height: 44px;
                    line-height: 22px;
                    font-size: 12px;
                    color: @text-main;
                    word-break: break-all;
                    // setEllipsis(2) 替换为原生 CSS
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;

                    ::v-deep .keyword {
                        color: @danger-color; // 关键词高亮
                        font-weight: bold;
                        text-shadow: 0 0 5px @danger-color;
                    }
                }
            }
        }
    }
}
</style>